<template>
  <view>
    <u-card
        :border="false"
        box-shadow="0px 0px 8px #ddd6d6"
        :body-style="{ padding: '0 30rpx' }"
        :head-style="{ padding: '28rpx 30rpx 10rpx' }"
        :head-border-bottom="false"
      >
        <view slot="head">
          <view class="card-row u-flex head">
            <u-section title="人员岗前培训完成达标率" color="#014833" font-size="32" :right="false"></u-section>
          </view>
        </view>
        <view slot="body">
          <view class="card-row u-p-t-10 u-p-b-20">
            <view class="body-cont w-100p">
              <view class="charts-box u-m-t-10">
                <qiun-data-charts 
                      type="ring"
                      :opts="opts"
                      :chartData="chartData"
                    />
              </view>
            </view>
          </view>
        </view>
      </u-card>
  </view>
</template>
<script>
export default {
    watch: {
    'customerNo': {
      immediate: true,
      handler: function (newval) {

        if (newval) {
          this.getServerData();
        }
      },
    },
  },
  props: {
    customerNo: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chartData: {},
      opts: {
        rotate: false,
        rotateLock: false,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        title: {
          name: "",
          fontSize: 15,
          color: "#666666"
        },
        subtitle: {
          name: "",
          fontSize: 25,
          color: "#7cb5ec"
        },
        extra: {
          ring: {
            ringWidth: 30,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      }
    };
  },
  created() {

  },
  methods: {
    getServerData () {
      this.$get(`/train/trainCompleteStatistics?customerNo=${this.customerNo}`).then(result => {
        if (result.body) {
          const obj = result.body[0]
          let res = {
            series: [
              {
                data: [
                  { "name": "总达标人数", "value": obj.completed },
                  { "name": "总未达标人数", "value": obj.noCompleted },
                ]
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
  .head{
    padding-bottom: 24rpx;
    border-bottom:  2rpx solid #F6F6F6;
  }
  .body-cont{
      box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
      border-radius: 12rpx;
      padding: 20rpx;
      h4{
        color: #333;
        font-size: 30rpx;
      }
  }
  .charts-box {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    height: 100%;
  }
</style>